class SysParamManage extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            types : [],
            list : [],
            paramForm : {},
            pageCount:0,
            readonly:false
        }
    }
    componentDidMount(){
        postJson("/params/getTypes.x",null,(data)=>{
            this.setState({types:data.data},()=>{console.log("types2",this.state)});
        })

        this.updateParamsList(1,10);
    }

    updateParamsList(page,pageSize){
        let params = {
            page:page,
            pageSize:pageSize,
            parent:this.refs.paramParent.value
        };

        postJson("/params/query.x",params,(data)=>{
            this.setState({list:data.data.list,pageCount : data.data.size});
        })
    }

    saveParam(){
        postJson("/params/save.x",this.state.paramForm,(data)=>{
            layui.layer.msg("保存成功");
            this.refs.paramModal.close();
            this.refs.table.refresh();
        })
    }

    paramFormOnchange(name,value){
        this.state.paramForm[name] = value;
        this.setState({paramForm:this.state.paramForm});
    }

    modify(param){
        if(!param.parent)
            param.parent = '';
        this.setState({paramForm:Object.create(param)});
        this.refs.paramModal.show();
    }

    delete(param){
        layui.layer.confirm("确认要删除参数"+param.name+"?",()=>{
            postJson("/params/delete.x",{name:param.name},(data)=>{
                layui.layer.msg("删除成功");
                this.refs.table.refresh();
            })
        })
    }

    getParents(parents){
        let ret = [];
        for(let key in parents){
            ret.push(<option value={key}>{parents[key]}</option>)
        }
        return ret;
    }

    addParam(){
        this.setState({paramForm : emptyObj(this.state.paramForm),readonly:false});
        this.refs.paramModal.show();
    }

    render(){
        return (
            <Frame header="系统参数管理" headerBtns={[<HeaderBtn onClick={()=>this.addParam()}>添加参数</HeaderBtn>]}>
                <Form type="pane">
                    <Item>
                        <Label>参数类型</Label>
                        <Select ref="paramParent">
                            <option value="">全部</option>
                            {
                                this.getParents(this.state.types)
                            }
                            <option value="other">其他</option>
                        </Select>
                        <Button btnType="normal" onClick={()=>{this.refs.table.refresh()}}>查询</Button>
                    </Item>
                    <Table size="sm" ref="table" count={this.state.pageCount} pageOnClick={(page,pageSize)=>this.updateParamsList(page,pageSize)}>
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>参数值</th>
                                <th>参数说明</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.list.length > 0?this.state.list.map((param)=>{
                                return (
                                    <tr>
                                        <td>{param.name}</td>
                                        <td>{param.value}</td>
                                        <td>{param.exp}</td>
                                        <td>
                                            <Button size="xs" onClick={()=>this.modify(param)}>修改值</Button>
                                            <Button size="xs" btnType="danger" onClick={()=>this.delete(param)}>删除</Button>
                                        </td>
                                    </tr>
                                )
                            }):''
                        }
                        </tbody>
                    </Table>
                </Form>
                <Modal ref="paramModal">
                    <Form size="sm">
                        <Item>
                            <Label>参数名称</Label>
                            <Input readonly={this.state.readonly} value={this.state.paramForm.name} onChange={(value)=>this.paramFormOnchange('name',value)} lay-verify="required"/>
                        </Item>
                        <Item>
                            <Label>参数值</Label>
                            <Input value={this.state.paramForm.value} onChange={(value)=>this.paramFormOnchange('value',value)} lay-verify="required"/>
                        </Item>
                        <Item>
                            <Label>参数说明</Label>
                            <Input value={this.state.paramForm.exp} onChange={(value)=>this.paramFormOnchange('exp',value)} lay-verify="required"/>
                        </Item>
                        <Item>
                            <Label>参数类型</Label>
                            <Select value={this.state.paramForm.parent} onChange={(value)=>this.paramFormOnchange('parent',value)}>
                                <option value="">请选择分类</option>
                                {
                                    this.getParents(this.state.types)
                                }
                            </Select>
                        </Item>
                        <Item>
                            <Button lay-submit="true" formBtn="true" size="sm" onClick={()=>this.saveParam()}>确定</Button>
                        </Item>
                    </Form>
                </Modal>
            </Frame>
        )
    }
}

ReactDOM.render(<SysParamManage/>,document.getElementById("query"));